<template>
  <div id="basicLayout">
    <!-- 粒子背景 -->
    <ParticleBackground />
    
    <!-- 主体布局 -->
    <div class="layout-container">
      <!-- 固定头部导航 -->
      <div class="fixed-header">
        <GlobalHeader />
      </div>
      
      <!-- 固定侧边栏 -->
      <GlobalSider class="fixed-sider" />
      
      <!-- 可滚动的内容区域 -->
      <div 
        class="scrollable-content"
        v-motion
        :initial="{ opacity: 0, y: 20 }"
        :enter="{ opacity: 1, y: 0, transition: { duration: 500, delay: 200 } }"
      >
        <!-- 页面内容 -->
        <div class="content-wrapper">
          <router-view v-slot="{ Component, route }">
            <transition
              :name="getTransitionName(route)"
              mode="out-in"
              @enter="onPageEnter"
              @leave="onPageLeave"
              @before-enter="onBeforePageEnter"
              @after-enter="onAfterPageEnter"
            >
              <component 
                :is="Component" 
                :key="route.path"
                class="page-component"
              />
            </transition>
          </router-view>
        </div>
        
        <!-- 底部放在滚动内容中 -->
        <footer 
          class="modern-footer"
          v-motion
          :initial="{ opacity: 0 }"
          :enter="{ opacity: 1, transition: { duration: 500, delay: 800 } }"
        >
        <div class="footer-content">
          <div class="footer-section">
            <h3 class="footer-title gradient-text">飞图协同云工坊</h3>
            <p class="footer-desc">专业的图片管理和协作平台</p>
          </div>
          
          <div class="footer-section">
            <h4 class="footer-subtitle">相关链接</h4>
            <ul class="footer-links">
              <li><a href="http://blog.yclothes.top" target="_blank">官方博客</a></li>
            </ul>
          </div>
        </div>
        
        <div class="footer-bottom">
          <p>&copy; {{ currentYear }} 飞图协同云工坊 by Clothes. All rights reserved.</p>
          <p>
            <a href="https://beian.miit.gov.cn/" target="_blank" class="icp-link">
              鲁ICP备2024133484号-3
            </a>
          </p>
        </div>
        </footer>
      </div>
    </div>
    
    <!-- 全局登录弹窗 -->
    <LoginModal 
      v-model:open="globalLoginModalVisible" 
      @success="onGlobalLoginSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import type { RouteLocationNormalized } from 'vue-router'
import GlobalHeader from '@/components/GlobalHeader.vue'
import GlobalSider from "@/components/GlobalSider.vue"
import ParticleBackground from '@/components/ParticleBackground.vue'
import LoginModal from '@/components/LoginModal.vue'
import { usePageTransition } from '@/composables/usePageTransition'
import { useAuth } from '@/composables/useAuth'
import { gsap } from 'gsap'

const router = useRouter()
const { 
  pageEnter, 
  pageLeave, 
  scrollToTop, 
  getAnimationDirection 
} = usePageTransition()
const { globalLoginModalVisible } = useAuth()

const previousRoute = ref<RouteLocationNormalized | null>(null)

// 计算当前年份
const currentYear = computed(() => {
  return new Date().getFullYear()
})

// 移除头部折叠功能

// 根据路由变化确定过渡动画类型
const getTransitionName = (route: RouteLocationNormalized): string => {
  if (!previousRoute.value) {
    return 'page-fade'
  }

  const direction = getAnimationDirection(previousRoute.value, route)
  
  // 根据路由类型选择不同动画
  if (route.path.includes('/admin/')) {
    return 'page-slide-up'
  } else if (route.path.includes('/user/')) {
    return 'page-scale'
  } else if (direction === 'forward') {
    return 'page-slide-left'
  } else {
    return 'page-slide-right'
  }
}

// 页面过渡事件处理
const onBeforePageEnter = (el: Element) => {
  // 滚动到顶部 - 现在滚动的是 scrollable-content 而不是 window
  const scrollableContent = document.querySelector('.scrollable-content')
  if (scrollableContent) {
    scrollableContent.scrollTop = 0
  }
}

const onPageEnter = (el: Element) => {
  const route = router.currentRoute.value
  const config = getTransitionConfig(route)
  
  pageEnter(el, config)
  
  // 为页面元素添加交错动画
  setTimeout(() => {
    const elements = el.querySelectorAll('.animate-item')
    if (elements.length > 0) {
      gsap.fromTo(elements, 
        { opacity: 0, y: 20 },
        { 
          opacity: 1, 
          y: 0, 
          duration: 0.4, 
          stagger: 0.1,
          ease: 'power2.out',
          delay: 0.2
        }
      )
    }
  }, 100)
}

const onPageLeave = (el: Element, done: () => void) => {
  const route = router.currentRoute.value
  const config = getTransitionConfig(route)
  
  pageLeave(el, config).then(done)
  
  // 更新前一个路由
  previousRoute.value = route
}

const onAfterPageEnter = () => {
  // 页面进入完成后的处理
  console.log('页面切换完成')
}

// 根据路由获取动画配置
const getTransitionConfig = (route: RouteLocationNormalized) => {
  if (route.path.includes('/admin/')) {
    return { direction: 'vertical' as const, duration: 500 }
  } else if (route.path.includes('/user/')) {
    return { direction: 'scale' as const, duration: 600 }
  } else {
    return { direction: 'horizontal' as const, duration: 400 }
  }
}

// 移除滚动处理逻辑

// 全局登录成功处理
const onGlobalLoginSuccess = () => {
  // 登录成功后的处理逻辑
  console.log('全局登录成功')
}
</script>

<style scoped>
#basicLayout {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
  overflow-x: hidden;
}

[data-theme="dark"] #basicLayout {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* 固定头部 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 80px;
}

/* 固定侧边栏 */
.fixed-sider {
  position: fixed;
  top: 80px;
  left: 0;
  bottom: 0;
  width: 240px;
  z-index: 50;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
}

[data-theme="dark"] .fixed-sider {
  background: rgba(31, 41, 55, 0.8);
  border-right: 1px solid rgba(75, 85, 99, 0.2);
}

/* 可滚动内容区域 */
.scrollable-content {
  position: fixed;
  top: 80px;
  left: 240px;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
}

/* 内容包装器 */
.content-wrapper {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 120px);
}

[data-theme="dark"] .content-wrapper {
  background: rgba(31, 41, 55, 0.4);
  border: 1px solid rgba(75, 85, 99, 0.2);
}

/* 页面组件基础样式 */
.page-component {
  width: 100%;
  min-height: 500px;
}

/* 页面过渡动画 - 淡入淡出 */
.page-fade-enter-active,
.page-fade-leave-active {
  transition: all 0.4s ease;
}

.page-fade-enter-from,
.page-fade-leave-to {
  opacity: 0;
}

/* 页面过渡动画 - 左滑 */
.page-slide-left-enter-active,
.page-slide-left-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.page-slide-left-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.page-slide-left-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 页面过渡动画 - 右滑 */
.page-slide-right-enter-active,
.page-slide-right-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.page-slide-right-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.page-slide-right-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 页面过渡动画 - 上滑 */
.page-slide-up-enter-active,
.page-slide-up-leave-active {
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.page-slide-up-enter-from {
  opacity: 0;
  transform: translateY(40px);
}

.page-slide-up-leave-to {
  opacity: 0;
  transform: translateY(-40px);
}

/* 页面过渡动画 - 缩放 */
.page-scale-enter-active,
.page-scale-leave-active {
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.page-scale-enter-from {
  opacity: 0;
  transform: scale(0.9);
}

.page-scale-leave-to {
  opacity: 0;
  transform: scale(1.1);
}

/* 现代化底部 */
.modern-footer {
  background: rgba(248, 250, 252, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-color);
  margin-top: 2rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1; /* 确保footer在分页组件下方 */
}

[data-theme="dark"] .modern-footer {
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.footer-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.footer-subtitle {
  font-size: 1.125rem;
  font-weight: 600;
  color: #e2e8f0;
  margin: 0;
}

.footer-desc {
  color: #94a3b8;
  margin: 0;
  line-height: 1.6;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 0.25rem 0;
  border-radius: 4px;
}

.footer-links a:hover {
  color: #0ea5e9;
  transform: translateX(4px);
}

.footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

[data-theme="dark"] .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
  margin: 0.5rem 0;
  color: #64748b;
  font-size: 0.875rem;
}

.footer-bottom p:first-child {
  margin-top: 0;
}

.footer-bottom p:last-child {
  margin-bottom: 0;
}

.icp-link {
  color: #64748b;
  text-decoration: none;
  transition: color 0.3s ease;
}

.icp-link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* 移除Ant Design的默认样式 */
:deep(.ant-layout) {
  background: transparent !important;
}

:deep(.ant-layout-header) {
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  line-height: normal !important;
}

:deep(.ant-layout-content) {
  background: transparent !important;
}

:deep(.ant-layout-footer) {
  background: transparent !important;
  padding: 0 !important;
}

:deep(.ant-layout-sider) {
  background: transparent !important;
}

:deep(.ant-menu) {
  background: transparent !important;
  border: none !important;
}

/* 滚动条样式 */
.scrollable-content::-webkit-scrollbar,
.fixed-sider::-webkit-scrollbar {
  width: 8px;
}

.scrollable-content::-webkit-scrollbar-track,
.fixed-sider::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.scrollable-content::-webkit-scrollbar-thumb,
.fixed-sider::-webkit-scrollbar-thumb {
  background: rgba(14, 165, 233, 0.3);
  border-radius: 4px;
  transition: background 0.3s ease;
}

.scrollable-content::-webkit-scrollbar-thumb:hover,
.fixed-sider::-webkit-scrollbar-thumb:hover {
  background: rgba(14, 165, 233, 0.5);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .fixed-header {
    height: 70px;
  }
  
  .fixed-sider {
    top: 70px;
    width: 200px;
  }
  
  .scrollable-content {
    top: 70px;
    left: 200px;
  }
  
  .content-wrapper {
    padding: 1.5rem;
    margin: 0.5rem;
  }
}

@media (max-width: 768px) {
  .fixed-sider {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .scrollable-content {
    left: 0;
  }
  
  .content-wrapper {
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 15px;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem 0.5rem;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .content-wrapper {
    margin: 0.25rem;
    padding: 0.75rem;
    border-radius: 10px;
  }
  
  .footer-content {
    padding: 1rem 0.75rem 0.5rem;
  }
  
  .footer-bottom {
    padding: 0.75rem 0.75rem;
  }
}
</style>
